import { Link } from "react-router-dom";
const Favorite = "btn btn-outline-danger";
const noFavorite = "btn btn-outline-success";
const Item = ({ article }) => {
  return (
    <div className="article-preview">
      {/* 作者基础信息 */}
      <div className="article-meta">
        <Link to={`/profile/${article.author.username}`}>
          <img
            src={article.author.avatar || "http://localhost:8000/default.png"}
            style={{ width: 30, height: 30 }}
            alt=""
          />
        </Link>
        <div>
          <Link to={`/article/${article.author.username}`}>
            {article.author.username}
          </Link>
        </div>
        <div className="pull-xs-right">
          <button className={article.favorited ? Favorite : noFavorite}>
            <i className="iconfont icon-xihuan"></i>
          </button>
        </div>
      </div>
      {/* 文章信息 */}
      <Link to={`/article/${article.slug}`} className="preview-link">
        <h4>{article.title}</h4>
        <p>{article.description}</p>
        <span>阅读更多....</span>
        <ul>
          {article.tags.map((tag) => {
            return (
              <li key={tag} className="tag-default tag-pill tag-outline">
                {tag}
              </li>
            );
          })}
        </ul>
      </Link>
    </div>
  );
};

export default Item;
